<template>
    <div>
        <button class="layui-btn" @click="addBrand()">增加品牌商</button>
        <br>
        <table class="layui-table schedule-table-data">
            <thead>
                <tr><th>编号</th><th>品牌商名称</th><th>添加时间</th><th>操作</th></tr> 
            </thead>
            <tbody>
                <tr v-for="(item, index) in brandList" :id="item.id">
                    <td>{{index + 1}}</td>
                    <td>{{item.shopName}}</td>
                    <td>{{item.createAt}}</td>
                    <td class="layui-text"><a href="javascript:;" @click="updateBrand(item.id)">修改</a>&nbsp;&nbsp;<a href="javascript:;" @click="delBrand(item.id)">删除</a></td>                    
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
    export default{
        name: 'brand',
        data: function () {
            return {
                brandList: [],
            }
        },
        methods: {
            getBrandList: function(callback){
                var me = this;
                axios.post('/shop/list').then(function(res){
                    var data = res.data;
                    if(data.success){
                        me.brandList = data.data.items;
                        callback && callback();
                    }else{
                        layer.msg(res.errorMsg, {icon: 2, time: 1000});
                    }
                })
            },
            addBrand: function(){
                var me = this;
                me.layui_layer.open({
                    title: '新建品牌商',
                    type:1,
                    area: ['500px', '140px'],
                    anim: 5,
                    shadeClose: false, //点击遮罩关闭
                    content: [
                        '<form action="" class="layui-form" style="padding:25px 0 0; overflow:hidden;">',
                            '<div class="layui-form-item">',
                                '<label><span class="layui-form-label" style="width:90px">品牌商名称：</span><div class="layui-input-inline"><input name="shopName" class="layui-input" type="text" value=""></div><button class="layui-btn" lay-submit="" lay-filter="addBrand">提交</button></label>',
                            '</div>',
                        '</form>'
                    ].join(''),
                    success: function(layero, index){
                        me.layui_form.on('submit(addBrand)', function(data){
                            if(!data.field.shopName){
                                layer.msg('品牌商名称不能为空', {icon: 2, time: 1000});
                            }else{
                                axios.post('/shop/add', data.field).then(function(res){
                                    me.getBrandList(function(){
                                        layer.close(layer.index);
                                    });
                                }).catch(function(err){});
                            }
                            return false;
                        });
                    }
                });
            },
            updateBrand: function(){
                console.info('修改品牌商');
            },
            delBrand: function(shopId){
                var me = this;
                layer.confirm('确定删除品牌商', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    axios.post('/shop/del', {id: shopId}).then(function(){
                        me.getBrandList(function(){
                            layer.msg('删除成功', {icon: 1, time: 1000});
                        });
                    })
                }, function(){});
            }
        },
        mounted: function(){
            var me = this;
            layui.use(['form', 'layer'], function(){
                me.layui_form = layui.form;
                me.layui_layer = layui.layer;
            });
            me.getBrandList();
        }
    }
</script>
<style>
</style>
